<template>
	<!--选择上门时间 弹窗  str -->
	<uni-popup ref="showTimepopup" type="bottom" :mask-click="false">
		<view class="popup-time">
			<view class="lable_top">
				选择预约时间
				<uni-icons class="icon" color="#aaa" @click="closePopup()" size="22" type="closeempty"></uni-icons>
			</view>
			<view class="bodyer_time">
				<div class="bodyer-left">
					<view v-for="(item,index) in TimeDateList" :key="index" class="left-item"
						:class="chackDateIndex==index?'active_item':''" @click="chackDate(item,index)">
						<text>{{item.text}}</text>
					</view>
				</div>
				<div class="bodyer-rigth">
					<view v-for="(item,index) in timeList"
						:class="`${chackDateTimeIndex==index?'active_item':''} ${!isSelective(item)?'is-show':''}`"
						class="left-item" :key="index">
						<text v-if="isSelective(item)" @click="chackDateTime(item,index)">{{item}}</text>
						<text v-else>{{item}}</text>
					</view>
				</div>
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import {
		ref, toRefs, watch
	} from "vue";
	import apiOrder from "@/util/api/order.js"
	import store from '@/store/index.js'
	const chackDateIndex = ref(0)//选中的日期下标
	const chackDateTimeIndex = ref(null)//选中的日期时间下标
	const showTimepopup = ref(null) //选择上门时间 弹窗
	const timeList = ref(['6:00~8:00', '8:00~10:00', '10:00~12:00', '12:00~14:00', '14:00~16:00', '16:00~18:00'])
	const TimeDateList = ref([])//日期列表
	const dateVal = ref(null)
	const time = ref('')
	const props = defineProps({
		//子组件接收父组件传递过来的值
		showpopup: Boolean,
		workId: String
	})
	//使用父组件传递过来的值
	const { showpopup, workId } = toRefs(props)
	const emit = defineEmits(['set-popup', 'value-change'])
	const closePopup = () => {
		showTimepopup.value.close()

		emit('set-popup', false)
	}
	const openPopup = () => {
		showTimepopup.value.open()
		emit('set-popup', true)
	}
	watch(showpopup, (n) => {
		if (n) {
			openPopup()
			getTimeDateList()

		} else {
			closePopup()
		}
	})
	//获取时间日期
	const getTimeDateList = () => {
		let today = new Date()
		let weeks = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
		TimeDateList.value = []
		for (var i = 0; i <= 4; i++) {
			let date = new Date(today.getTime() + i * 24 * 60 * 60 * 1000);
			var year = date.getFullYear()
			var month = date.getMonth() + 1
			var day = date.getDate()
			var nowWeek = weeks[date.getDay()];
			let tmp = ''
			if (i == 0) {
				tmp = '今天(' + nowWeek + ')'
			} else if (i == 1) {
				tmp = '明天(' + nowWeek + ')'
			} else {
				tmp = month + '月' + day + '日' + '(' + nowWeek + ')'
			}
			TimeDateList.value.push({ text: tmp, date: year + '-' + month + '-' + day })
		}
		if (!workId.value) {
			chackDateIndex.value = store.state.appointmentTime?.chackDateIndex||0
			chackDateTimeIndex.value = store.state.appointmentTime?.chackDateTimeIndex
			dateVal.value = TimeDateList.value[chackDateIndex.value]
		}
	}
	// 选中的日期
	const chackDate = (item, index) => {
		chackDateIndex.value = index
		dateVal.value = TimeDateList.value[chackDateIndex.value]
	}
	// 选中的日期时间
	const chackDateTime = (item, index) => {
		chackDateTimeIndex.value = index
		time.value = timeList.value[chackDateTimeIndex.value]
		dateVal.value = TimeDateList.value[chackDateIndex.value]
		if (workId.value) {
			let data = {
				"expectedDate": dateVal.value.date,
				"expectedEndTime": time.value.split('~')[1],
				"expectedStartTime": time.value.split('~')[0],
				"remark": "",
				"workId": workId.value
			}
			apiOrder.updateExpectedTime(data).then(res => {
				if (res.code == 20000) {
					uni.showToast({
						icon: 'success',
						title: res.message
					})
					closePopup()
				}
			})
			chackDateTimeIndex.value = null
		} else {
			emit('value-change', { dateVal: dateVal.value, time: time.value, chackDateIndex: chackDateIndex.value, chackDateTimeIndex: chackDateTimeIndex.value })
		closePopup()
		}
		
	}
	// 判断时间段是否可选
	const isSelective = (item) => {
		let StartTime = item.split('~')[0]
		let isH = StartTime.split(':')[0]
		let today = new Date()
		var hh = today.getHours()
		if (chackDateIndex.value == 0) {
			if (hh <= isH) {
				return true
			} else {
				if (hh >= 18) {
					chackDateIndex.value = 1
				}
				return false
			}
		} else {
			return true
		}
	}
</script>

<style scoped lang="scss">
	.popup-time {
		background-color: #fff;
		height: 600rpx;
		border-radius: 40rpx 40rpx 0 0;
		width: 100%;
		position: relative;
		overflow-y: auto;

		.lable_top {
			text-align: center;
			line-height: 100rpx;
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
			height: 100rpx;
			border-bottom: 1rpx solid #eee;

			.icon {
				position: absolute;
				right: 40rpx;
			}
		}

		.bodyer_time {
			display: flex;
			height: calc(100% - 102rpx);

			.bodyer-left {
				background-color: #eee;

				.left-item {
					padding: 20rpx;
				}

				.active_item {
					background-color: #fff;
					color: #007cff;
				}

			}

			.bodyer-rigth {

				.left-item {
					padding: 20rpx;
					text-align: center;

				}

				.is-show {
					color: #eee;
				}

				.active_item {
					color: #007cff;
				}
			}
		}
	}
</style>